<template>
    <n-card title="服务状态" size="small" id="vc_serviceStatus">
        <template #header-extra>
            <div style="position: absolute">
                <div style="position: relative; right: -0.375rem; top: calc(-0.875rem - 2px)">
                    <div
                        style="
                            width: 1.25rem;
                            height: 1.25rem;
                            background-color: hsla(174, 100%, 33%, 0.5);
                            transform: translateX(-50%);
                            clip-path: polygon(100% 0, 100% 100%, 0 0);
                            border-radius: 0.25rem;
                        "></div>
                </div>
            </div>
        </template>
        <div class="card-body">
            <section class="d-phone-none">
                <div class="icon-container">
                    <n-icon size="42"><WbSunnyOutlined /></n-icon>
                </div>
            </section>
            <section class="info-container">
                <table style="border-collapse: collapse">
                    <tbody>
                        <tr>
                            <td class="title">状态：</td>
                            <td>
                                <span v-if="!data.service_status_bool" style="color: red">
                                    {{ data.service_status }}
                                </span>
                                <span v-if="data.service_status_bool" style="color: green">
                                    {{ data.service_status }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="title">运行时长：</td>
                            <td>{{ data.uptime }}</td>
                        </tr>
                        <tr>
                            <td class="title">状态变化时间：</td>
                            <td>{{ data.start_time }}</td>
                        </tr>
                    </tbody>
                </table>
                <table style="border-collapse: collapse">
                    <tbody>
                        <tr>
                            <td class="title">随系统自启：</td>
                            <td>
                                <span v-if="data.autostart" style="color: green">已启用</span>
                                <span v-else>已禁止</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="title">当前在线人数：</td>
                            <td>0</td>
                        </tr>

                        <tr>
                            <td class="title">&ensp;</td>
                            <td>&ensp;</td>
                        </tr>
                    </tbody>
                </table>

                <n-space style="grid-column: span 2">
                    <n-button
                        size="small"
                        type="primary"
                        secondary
                        @click="handleExecuteService('start')">
                        <n-icon><SwitchAccessShortcutFilled /></n-icon>
                        启动服务
                    </n-button>
                    <n-button size="small" type="error" secondary @click="handleExecuteService('stop')">
                        <n-icon><DownloadingOutlined /></n-icon>
                        关闭服务
                    </n-button>
                    <n-button
                        size="small"
                        type="warning"
                        secondary
                        @click="handleExecuteService('restart')">
                        <n-icon><RestartAltFilled /></n-icon>
                        重启服务
                    </n-button>
                    <n-button
                        size="small"
                        type="info"
                        secondary
                        @click="handleExecuteService('switch_enable')">
                        <n-icon><NotStartedOutlined /></n-icon>
                        切换开机自启
                    </n-button>
                </n-space>
            </section>
        </div>
    </n-card>
</template>

<script setup lang="ts">
import axiosInstance from '@/utils/network/axios'

import {
    WbSunnyOutlined,
    SwitchAccessShortcutFilled,
    DownloadingOutlined,
    NotStartedOutlined,
    RestartAltFilled
} from '@vicons/material'
import { useMessage } from 'naive-ui'
import { onBeforeMount, ref } from 'vue'
const message = useMessage()
const data = ref({
    service_status: 'None',
    service_status_bool: 'None',
    uptime: 'None',
    autostart: 'None',
    start_time: 'None'
})
async function handleGetServiceStatus() {
    axiosInstance.get(`/home/dashboard/service-status?name=vsftpd&type=statistic`).then((response) => {
        data.value = response.data
    })
}
async function handleExecuteService(action: 'start' | 'stop' | 'restart' | 'switch_enable') {
    axiosInstance.put(`/home/service-control?name=vsftpd`, { action: action }).then((response) => {
        message.success('操作成功')
    })
}
onBeforeMount(() => {
    handleGetServiceStatus()
})
</script>

<style lang="scss" scoped>
@use '@/assets/style/sea-viewport';
#vc_serviceStatus {
    @media (min-width: sea-viewport.$phone_min) {
        //max-width: var(--max_width_2items);
    }
}
.n-card {
    p {
        white-space: nowrap;
        //min-width: 12rem;
        font-size: 1rem;
    }
}
.card-body {
    display: flex;
    flex-direction: row;
    //align-items: center;
    justify-content: flex-start;

    flex-wrap: wrap;
    gap: 1rem;
}

.icon-container {
    display: flex;
    width: min-content;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 100%;
    background-color: rgba(177, 228, 177, 0.5);
    color: green;
}

.info-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    grid-template-rows: auto auto;
    gap: 0.5rem;

    table {
        td {
            white-space: nowrap;
            &.title {
                text-align: right;
            }
        }
    }
}
</style>
